<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="4-1" open-index="4"></sideBar>
      </el-aside>
      <el-main>
        <!--        <p>this is subcom page</p>-->
        <!--搜索栏-->
        <el-container direction="horizontal">
          <el-input v-model="words.username" placeholder="请输入志愿者名称 （支持模糊查询）"></el-input>
          <el-button style="margin-left: 20px" @click="vague()">搜索</el-button>
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">添加</el-button>
          <el-drawer
            title="新增志愿者"
            :visible.sync="drawer"
            :direction="direction"
            ref="thisdrawer">

            <el-row :gutter="20">
              <el-col :span="6" :offset="2">志愿者姓名</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2" ><el-input v-model="newaccinfo.name" placeholder="请输入志愿者姓名" clearable ></el-input></el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="6" :offset="2">志愿者性别</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2" ><el-input v-model="newaccinfo.gender" placeholder="志愿者性别" clearable ></el-input></el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="6" :offset="2">志愿者电话</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2" ><el-input v-model="newaccinfo.phone" placeholder="请输入志愿者电话" clearable ></el-input></el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="6" :offset="2">入职日期</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2" ><el-input v-model="newaccinfo.hire_date" placeholder="入职日期" clearable ></el-input></el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="6" :offset="2">是否在职</el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2" ><el-input v-model="newaccinfo.ISACTIVE" placeholder="是否在职(请输入是或否)" clearable ></el-input></el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 40px">
              <el-col :span="6" :offset="2">
                <el-button @click="newsub()" type="primary" style="width: 130%">确认提交</el-button></el-col>
            </el-row>
          </el-drawer>
        </el-container>
        <!--分公司列表-->
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          @selection-change="handleSelectionChange"
          height="502"
          style="width: 100%; margin-top: 20px">


          <el-table-column
            prop="id"
            label="志愿者编号">
          </el-table-column>

          <el-table-column
            prop="username"
            label="志愿者名称">
          </el-table-column>

          <el-table-column
            prop="gender"
            label="志愿者性别" >
          </el-table-column>

          <el-table-column
            prop="phone"
            label="电话">
          </el-table-column>

          <el-table-column
            prop="hire_date"
            label="入职日期" >
          </el-table-column>

          <el-table-column
            prop="ISACTIVE"
            label="是否在职">
          </el-table-column>

          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">

              <el-button icon="el-icon-edit" circle size="small"
                         @click="drawer2 = true,editsubinfo.name=scope.row.accType_name,
                         editsubinfo.describe=scope.row.accType_describe,
                         editsubinfo.method=scope.row.accType_method"></el-button>
              <el-drawer
                title="修改事故类型"
                :visible.sync="drawer2"
                :direction="direction"
                ref="thisdrawer2">

                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">志愿者编号</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="editsubinfo.id" placeholder="请输入志愿者编号" clearable ></el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">志愿者姓名</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="editsubinfo.name" placeholder="请输入志愿者姓名" clearable ></el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">志愿者性别</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="editsubinfo.gender" placeholder="请输入志愿者性别" clearable ></el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">志愿者电话</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="editsubinfo.phone" placeholder="请输入志愿者电话" clearable ></el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">入职日期</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="editsubinfo.hire_date" placeholder="请输入志愿者入职日期" clearable ></el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">是否在职</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="editsubinfo.ISACTIVE" placeholder="请输入志愿者是否在职" clearable ></el-input></el-col>
                </el-row>

                <el-row :gutter="20" style="margin-top: 40px">
                  <el-col :span="6" :offset="2">
                    <el-button @click="handleEdit()" type="primary" style="width: 130%">确认提交</el-button></el-col>
                </el-row>
              </el-drawer>
              <el-button icon="el-icon-delete" circle size="small"
                         @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>

        </el-table>
        <!--角标-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="current_change">
          </el-pagination>
        </div>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
export default {
  components: {sideBar, navMenu},
  data() {
    return {
      tableData: [],
      total: 0,
      pagesize: 8,
      currentPage: 1,
      st: 2,
      words: {
        username: ''
      },
      drawer: false,
      drawer2: false,
      direction: 'rtl',
      options: [{
        value: '高梁桥地铁集团',
        label: '高梁桥地铁集团'
      }],
      newaccinfo: {
        name: '',
        gender: '',
        phone: '',
        hire_date: '',
        ISACTIVE: ''
      },
      line: {subcom_name: '', super_company_name: ''},
      editsubinfo: {
        id: '',
        name: '',
        gender: '',
        phone: '',
        hire_date: '',
        ISACTIVE: ''
      }
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/volunteerInfo`).then((res) => {
      console.log(res);
      this.tableData = res.data;
      this.total = this.tableData.length;
      this.total = this.tableData.length;
      console.log(this.total);
      console.log(res.data);
    });
  },
  methods: {
    current_change: function(currentPage){
      this.currentPage = currentPage;
    }, async vague() {
      this.$axios.post(`http://127.0.0.1:5000/volunteerInfoBySearch`, this.words).then((res) => {
        console.log(res);
        if(res.data==0){
          this.$message('没有符合查询条件的结果');
        }
        else {
          this.$message('查询成功');
          this.tableData = res.data;
          this.total = this.tableData.length+3;
        }
      });
    }, async handleDelete($index, row) {
      console.log(row.subcom_id);
      this.$axios.post(`http://127.0.0.1:5000/volunteerdelete`, row.id).then((res) => {
        console.log(res);
        this.st = res.data;
        if (this.st==1){
          this.$message('删除成功');
          window.location.reload();}
        else{
          this.$message('删除失败');
        }

        this.st = 2;
      });
    },
    async newsub() {
      this.$axios.post(`http://127.0.0.1:5000/newvolunteer`, this.newaccinfo).then((res) => {
        console.log(res);
        this.st = res.data;

        if (this.st==1) {
          this.$message('新增成功');
          this.$refs.thisdrawer.closeDrawer();
          window.location.reload();
        }
        else {
          this.$message('新增失败，已存在！');
          this.$refs.thisdrawer.closeDrawer();
        }
        this.st=2;

      });
    },
    handleEdit() {
      this.$axios.post(`http://127.0.0.1:5000/editevol`, this.editsubinfo).then((res) => {
        console.log(res);
        this.st = res.data;

        if (this.st==1) {
          this.$message('修改成功');
          this.$refs.thisdrawer2.closeDrawer();
          window.location.reload();
        }
        else{
          this.$message('修改失败！');
          this.$refs.thisdrawer2.closeDrawer();
        }
        this.st.statu=2;
      });
    }
  }
}
</script>

<style>


.menu{
  width: 100%;
  float: left;
  height: 700px;
}
</style>
